import React,{Component} from 'react';
import {connect} from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import {actionCreater} from './store';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  NavSearchWapier,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button
} from './style';

class Header extends Component{
  getListArea(){
    const {list,focused,page,totalPage,mouseIn,handleMouseEnter,handleMouseLeave,handleChangePage}=this.props;
    const newList = list.toJS();
    const pageList = [];
    if(newList.length){
      for(let i=(page-1)*10;i<page*10;i++){
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }
    if(focused ||mouseIn){
      return (
        <SearchInfo onMouseEnter={handleMouseEnter()}>
        <SearchInfoTitle>
          热门搜索
          <SearchInfoSwitch onClick={()=>handleChangePage(page,totalPage,this.spinIcon)}>
          <i ref={(icon)=>{this.spinIcon=icon}} className="iconfont spin">&#xe851;</i>
          换一批</SearchInfoSwitch>
        </SearchInfoTitle>
        <SearchInfoList>
        <SearchInfoItem>React</SearchInfoItem>
         {pageList}
        </SearchInfoList>
      </SearchInfo>
      )
    }else{
      return null;
    }
  }
  render(){
    const {focused}=this.props
    return (
      <HeaderWrapper>
        <Logo/>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载APP</NavItem>
          <NavItem className='right'>登陆</NavItem>
          <NavItem className='right'>
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <NavSearchWapier>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
            <NavSearch
              className={focused?'focused':''}
              onFocus={this.props.handleInputFocus}
              onBlur={this.props.handleInputBlur}
            ></NavSearch>
            </CSSTransition>
            <i className={focused?'focused iconfont zoom':'iconfont zoom'}>
              &#xe637;
            </i>
            {this.getListArea(focused)}
          </NavSearchWapier>
        </Nav>
        <Addition>
          <Button className='writting'>
          <i className="iconfont">&#xe670;</i>
          写文章</Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}
const mapStateToProps = (state)=>{
  return{
    focused:state.getIn(['header','focused']),
    list:state.getIn(['header','list']),
    page:state.getIn(['header','page']),
    totalPage:state.getIn(['header','totalPage']),
    mouseIn:state.getIn(['header','mouseIn'])
  }
}
const mapDispathToProps = (dispatch)=>{
  return{
    handleInputFocus(list){
      (list.size===0)&&dispatch(actionCreater.getList());
      dispatch(actionCreater.searchFocus());
    },
    handleInputBlur(){
      dispatch(actionCreater.searchBlur());
    },
    handleMouseEnter(){
      dispatch(actionCreater.mouseEnter());
    },
    handleMouseLeave(){
      dispatch(actionCreater.mouseLeave());
    },
    handleChangePage(page,totalPage,spin){
      const originAngle = spin.style.transform.repalce(/[^0-9]/ig,'');
      if(originAngle){
        originAngle = parseInt(originAngle,10);
      }else{
        originAngle=0;
      }
      spin.style.transform = 'rotate((originAngle+360)deg)';
      if(page<totalPage){
        dispatch(actionCreater.changePage(page+1));
      }else{
        dispatch(actionCreater.changePage(1));
      }
      
    },
  }
}

export default connect(mapStateToProps,mapDispathToProps)(Header);